<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		/*
		####  2. 进行全局样式的配置 
		*/
		html,
		body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
		}
		#map_container {
				width: 100%;
				height: 100%;
				margin: 0;
		}
	</style>
	<!-- 
	#### 1. 在head 头部 导入需要的依赖信息
	 -->
	<!-- 百度地图基础库 使用自己的 ak 进行配置 -->
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<!-- 公共的文件代码 里面包含 地图初始化 和 实用样式 -->
	<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
	<!-- 使用根据城市名称获取城市的坐标 -->
	<script src="https://mapv.baidu.com/build/mapv.js"></script>
	<!--使用mapvgl的时候需要引入-->
	<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
	<!-- 使用飞线图层需要使用的依赖 -->
	<!-- 
	/*
	FlyLineLayer
	用来展示轨迹飞线图层，继承自Layer

	基于Threejs实现，使用前需要额外引入mapvgl.threelayers包
	*/

	 -->
	<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js"></script>
	<title>地图展示</title>
</head>
<body>
	<!-- 
	#### 3. 编写一个容器用于展示地图 这里的id名称 在commo.js文件中已经被固定了，这里只能写为 map_container
	 -->
	<div id="map_container"></div>
	<script type="text/javascript">
		/*
		#### 4. 使用commn.js中的initMap方法初始化一个地图
		
		4.1 这里初始化地图使用的是 https://mapv.baidu.com/gl/examples/static/common.js库中的initMap 函数它初始化完成一个地图之后会返回一个地图对象。

		4.2 在common.js 中有初始化地图公共的代码，但是其将地图容器的名称固定的写为 map_container，这里需要注意。
		*/
		var map = initMap({
			// 切斜角度
			tilt: 60,
			// 旋转角度
			heading: 0,
			// 地图的中心点坐标
			center: [103.438656,25.753594],
			// 地图缩放比例
			zoom: 6,
			// 地图样式
			style: purpleStyle
		});
		setData(initData());
		/*
		#### 5. 准备数据源

		数据中的每一个数据项代表一条贝塞尔曲线。
		贝赛尔曲线又由一些点构成，最后通过mapvgl的飞线图层FlyLineLayer创建一条条的飞线。
		*/
		function initData() {
			// 生成的数据信息
			var data = [];
			// 城市数据信息
			var citys = [
				'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
				'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
				'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
			];
			// 需要定义 100 个 data 的数据项
			var randomCount = 100; // 模拟的飞线的数量

			/*
			###### 5.1 生成贝赛尔曲线坐标集
			
			*/
			/*
			11.实例化贝塞尔曲线对象(BezierCurve) ;这是mapvgl 中的内置工具。
			*/
			var curve = new mapvgl.BezierCurve();

	    	// 构造数据
  	  		while (randomCount--) {

				/*
				###### 5.2 设置起点坐标和终点坐标
				
				*/
				// 获取每一个城市的中心点坐标 随机生成  在 所有城市范围内挑选 生成的随机数是 [0,cities.length] 创建开始开始城市和终点城市
				var startPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);
				var endPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)])
				/*
				22.通过 setOptions方法设置贝赛尔曲线的起点坐标和终点坐标
				*/
				curve.setOptions({
					start: [startPoint.lng, startPoint.lat],
					end: [endPoint.lng, endPoint.lat]
				});

				/*
				###### 5.3 生成贝塞尔曲线坐标集

				33.使用 getPoints()方法获取到生成的贝赛尔曲线坐标集。并将其设置到data数组中。
				*/
				var curveModelData = curve.getPoints();
				data.push({
					geometry: {
						type: 'LineString',
						coordinates: curveModelData
					},
					properties: {
						count: Math.random()
					}
				});
    		}
			return data;
		}

		/*
		#### 6. 设置数据源
		*/
		function setData(data) {
			// 6.1 创建图层管理器对象：需要传递当前的map对象。
			// 创建图层管理器
			var view = new mapvgl.View({
				map: map
			});
			// 6.2 创建飞线图层:使用的是 FlyLineLayer对象。
			/*
			FlyLineLayer
			用来展示轨迹飞线图层，继承自Layer

			基于Threejs实现，使用前需要额外引入mapvgl.threelayers包
			*/
			var flylineLayer = new mapvgl.FlyLineLayer({
				// 飞线动画方式  normal，默认值，飞线动画速度均匀；chaos，飞线动画速度不均匀
				style: 'chaos',
				// 飞线动画的步长，步长越大动画速度越快 默认值 0.1 
				step: 0.3,
				// 底线颜色
				color: 'rgba(33, 242, 214, 0.3)',
				// 飞线动画的颜色
				textureColor: function (data) {
					return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd';
				},
				// 飞线动画的宽度
				textureWidth: 20,
				// 飞线动画的长度，占整条线的百分比，取值0-100
				textureLength: 10
    		});
			// 6.3 将飞线图层添加到图层管理器中:
			view.addLayer(flylineLayer);
			// 6.4 将准备的数据和 飞线图层绑定 :
			flylineLayer.setData(data);
		}
	</script>	
</body>
</html>